<template>
  <div class="list_position">
    <div class="item_position" v-for="(item,index) in myPosition" :key="index">
      <div class="tab_position">
        <div class="row_position">
          <div class="col_position col_1">
            <p>{{item.ofname}}</p>
            <span>{{item.ofcode}}</span>
          </div>
          <div class="col_position col_2">
            <p>{{item.last_price}}</p>
            <span>净值/元</span>
          </div>
          <div class="col_position col_3">
            <p>{{item.enable_vol}}</p>
            <span>可用份额</span>
          </div>
          <div class="col_position col_4">
            <p :class="item.income_color">{{item.income_balance}}</p>
            <span>累计收益</span>
          </div>
        </div>
      </div>
      <div class="btn_list">
        <div class="btn purchase" @click.stop.prevent="purchase(item)">申购</div>
        <div class="btn redeem" @click.stop.prevent="redeem(item)">赎回</div>
      </div>
    </div>
    <div class="placeholder" v-if="page == 'account' && myPosition.length == 0">
      <div class="content">
        <div class="tips" v-if="describe ==''">哎呦，我还没有基金持仓哦！</div>
        <div class="tips" v-else-if="describe !=''">{{describe}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      myPosition: {
        type: Array
      },
      describe: {
        type: String
      },
      page: {
        type: String,
        default: ''
      }
    },
    methods: {
      //申购
      purchase (item) {
        let data = {
          fundCode: item.ofcode,
          fundName: item.ofname,
          fundStatus: item.ofstatue
        };
        this.$router.push({path: '/fundbuy', query: data});
      },

      //赎回
      redeem (item) {
        let data = {
          ofcode: item.ofcode,
          ofname: item.ofname,
          ofstatue: item.ofstatue+'',
          last_price: item.last_price,
          enable_vol: item.enable_vol
        };
        this.$router.push({path: '/fundredeem', query: data});
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .color-red {
    color: #ff3333;
  }

  .color-green {
    color: #89cd4c;
  }

  .item_position {
    width: 100%;
    border-top: 1px solid #dfdfdf;
    background-color: #fff;
  }

  .tab_position {
    display: table;
    width: 100%;
    padding: 0 5%;
  }

  .row_position {
    display: table-row;
  }

  .col_position {
    display: table-cell;
    height: 58px;
    vertical-align: middle;
    text-align: center;
  }

  .col_position.col_1 {
    width: 32%;
    text-align: left;
  }

  .col_position.col_2 {
    width: 21%;
  }

  .col_position.col_3 {
    width: 24%;
  }

  .col_position.col_4 {
    width: 23%;
    text-align: right;
  }

  .col_position p {
    padding: 8px 0 6px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 16px;
    color: #565656;
  }

  .col_position span {
    display: block;
    padding-bottom: 8px;
    font-size: 12px;
    line-height: 12px;
    color: #999;
  }

  .btn_list {
    width: 100%;
    height: 40px;
    text-align: center;
  }

  .btn_list .btn {
    display: inline-block;
    width: 100px;
    height: 28px;
    border-radius: 5px;
    text-align: center;
    line-height: 14px;
    font-size: 16px;
    color: #fff;
    margin-right: 20px;
  }

  .btn_list .btn:last-child {
    margin-right: 0;
  }

  .btn_list .purchase {
    background-color: #fd5a5d;
  }

  .btn_list .redeem {
    background-color: #22b0ee;
  }
</style>
